<template>
  <div class="res-comment-container">
    <template v-if="commentList">
      <div class="rating-box flex-item-center">
        <p class="fixed-shop-score">{{commentList.rating.fixedShopScore}}</p>
        <div class="rating-item">
          <p class="m0 base-font-size">商家评分</p>
          <p class="rating-star m0">
            <span v-for="i in 5" :key="i" class="iconfont icon-xingxing1 base-font-size"></span>
          </p>
        </div>
        <div class="rating-item">
          <p class="m0 base-font-size">味道</p>
          <p class="m0 fixed-score">{{commentList.rating.fixedTasteScore}}</p>
        </div>
        <div class="rating-item">
          <p class="m0 base-font-size">包装</p>
          <p class="m0 fixed-score">{{commentList.rating.fixedPackageScore}}</p>
        </div>
        <span class="iconfont icon-anjianfengexian"></span>
        <div class="rating-item">
          <p class="m0 base-font-size">配送</p>
          <p class="m0 fixed-score">{{commentList.rating.rider_score.toFixed(1)}}</p>
        </div>
      </div>
      <div class="rating-detail-box">
        <div class="tags">
          <template v-for="(tag, i) in commentList.tags">
            <span :class="['tags-item', currentTag === i?tagStyle :'', tag.name === '差评'? 'n-re': '']"  :key="tag.name" @click="exchangeTag(tag, i)">
              {{tag.name}}
              {{((tag.count === -1) || (tag.count === 0)) ? '' : tag.count }}
            </span>
          </template>
          <p @click="onlyShowHasContent" class="only-show">
            <span class="iconfont icon-dagou" :class="req.has_content? 'only-show_gou': ''"></span>
            只看有内容的评价
          </p>
          <div class="comment-item" v-for="(com, index) in commentList.comments" :key="index">
            <img-format v-if="com.avatar" class="user-avatar" :src="com.avatar" />
            <span v-else class="user-avatar" :class="'back-posi'+index"></span>
            <section class="com-item-r">
              <p class="flex-row-sb-center m0">
              <span class="cuser-name">{{com.username}}</span>
              <span class="cread-at">{{com.rated_at}}</span>
              </p>

              <p class="rating-star rating-star-m">
                <span v-for="i in 5" :key="i" class="iconfont icon-xingxing1 small-star"></span>
                <span v-if="com.food_ratings[0].rating >= 4" class="praise">超赞</span>
              </p>
              <p class="rating-text">{{com.rating_text}}</p>
              <p v-if="com.reply.content !== ''" class="reply-content">商家回复：{{com.reply.content}}</p>
              <div class="show-img">
                <div v-for="img in com.order_images" :key="img.image_hash" @click="showLargeImgBox(img)">
                  <img-format class="img-item" :src="img.image_hash" :size="250"/>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </template>
    <div class="large-img-box flex-item-center" v-if="showLargeImg" @click="showLargeImg = false">
      <span class="iconfont icon-shanchu"></span>
      <img-format :src="largeImg.image_hash" class="large-img" :size="750" />
      <p class="food-names">{{largeImg.food_names[0]}}</p>
    </div>
  </div>
</template>

<script>
import { getRstComments } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
export default {
  name: 'res-comment',
  data() {
    return {
      req: {
        shopId: '',
        lat: '',
        lng: '',
        has_content: true,
        tag_name: ''
      },
      commentList: undefined,
      currentTag: 0,
      tagStyle: 'is-sele',
      showLargeImg: false,
      largeImg: '',
      f: true
    }
  },
  components: {
    ImgFormat
  },
  async created() {
    const { latitude, longitude } = JSON.parse(window.sessionStorage.getItem('Geo'))
    this.req.lat = latitude
    this.req.lng = longitude
    const href = window.location.hash.split('?')[1].split('=')[1]
    const href2 = href.split('&')
    if(href2.length > 1) {
      this.req.shopId  = href2[0]
    }else {
      this.req.shopId  = href
    }
    this.getRstComment(this.req)
  },
  methods: {
    exchangeTag(tag, i) {
      this.currentTag = i
      if(tag.name === '差评') {
        this.tagStyle = 'is-sele-nre'
      }else {
        this.tagStyle = 'is-sele'
      }
      if(tag.name !== '全部') {
        this.f = false
      }
      this.req.tag_name = tag.name
      this.getRstComment(this.req)
    },
    async getRstComment(req) {
      try {
        const { data } = await getRstComments(req, this.f)
        console.log(data)
        if(this.f) {
          this.commentList = data
        }else {
          this.commentList.comments = data
        }
      }catch(e) {
        console.log(e)
      }
    },
    onlyShowHasContent() {
      this.req.has_content = !this.req.has_content
      this.getRstComment(this.req)

    },
    showLargeImgBox(img) {
      this.showLargeImg = true
      this.largeImg = img
    }
  }
}
</script>

<style scoped lang="less">
  .res-comment-container {
    border-top: 1px solid #ddd;
  }
  .rating-box {
    padding: 20px;
  }
  .fixed-shop-score {
    font-size: 64px;
    color: #FF5500;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .rating-star {
    background: linear-gradient(to right, #eff4b3, #ffc32c);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .rating-item {
    margin: 0 20px;
    font-size: 18px;
    text-align: center;
    color: #555;
  }
  .fixed-score {
    font-size: 40px;
    color: #999;
  }
  .icon-anjianfengexian {
    font-size: 60px;
    color: #eee;
  }
  .rating-detail-box {
    padding: 20px;
    border-top: 20px solid #f5f5f5;
    background-color: #fff;
  }
  .tags-item {
    padding: 10px;
    background-color: #ebf5ff;
    color: #999;
    font-size: 24px;
    margin: 0 20px;
  }
  .n-re {
    background-color: #f5f5f5;
    color: #b4b4b4;
  }
  .is-sele {
    background-color: #0097FF;
    color: #fff;
  }
  .is-sele-nre {
    background-color: #a7a7a7;
    color: #fff;
  }
  .only-show {
    padding: 20px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    color: #777;
    font-size: 26px;
  }
  .icon-dagou {
    font-size: 20px;
    color: #999;
  }
  .only-show_gou {
    color: #00D762;
  }
  .comment-item {
    display: flex;
    align-items: flex-start;
  }
  .com-item-r {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .user-avatar {
    display: inline-block;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-image: url(//shadow.elemecdn.com/faas/h5/static/sprite.3ffb5d8.png);
    background-size: 60px 360px;
    overflow: hidden;
  }
  .back-posi0 {
    background-position: 0 0;
  }
  .back-posi1 {
    background-position: 0 60px;
  }
  .back-posi2 {
    background-position: 0 120px;
  }
  .back-posi3 {
    background-position: 0 180px;
  }
  .back-posi4 {
    background-position: 0 240px;
  }
  .back-posi5 {
    background-position: 0 300px;
  }
  .cuser-name {
    font-size: 26px;
  }
  .small-star {
    margin: 0 2px;
    font-size: 20px;
  }
  .praise {
    margin-left: 10px;
    font-size: 22px;
    -webkit-text-fill-color: #FF5500;
  }
  .rating-star-m {
    margin: 8px 0;
  }
  .cread-at {
    color: #888;
    font-size: 24px;
  }
  .rating-text {
    font-size: 28px;
    color: #333;
  }
  .reply-content {
    padding: 15px;
    background-color: #f3f3f3;
    font-size: 26px;
    color: #333;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: -28px;
      left: 20px;
      border: 14px solid #f3f3f3;
      border-top: 14px solid transparent;
      border-right: 14px solid transparent;
      border-left: 14px solid transparent;
    }
  }
  .show-img {
    display: flex;
  }
  .img-item {
    margin: 10px;
  }
  .large-img-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 99;
  }
  .large-img {
    width: 100%;
  }
  .food-names {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: #fff;
    font-size: 22px;
    z-index: 999;
  }
  .icon-shanchu {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 40px;
  }
</style>
